{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/css/shopCart.css" />
<style>
  .el-icon-phone {
    color: green;
    font-size: 20px;
  }

  .el-icon-location-information {
    color: #ff6884;
    font-size: 20px;
  }

  .store {
    padding: 10px 12px;
  }

  .store-cover {
    border-radius: 4px;
    overflow: hidden;
  }

  .store-content {
    padding: 5px 10px;
  }

  .van-panel__header {
    display: none;
  }

  .store-tab {
    padding: 10px;
    margin: 0 16px;
    background-color: #fff;
    min-height: 200px;
  }

  .goodslist li {
    width: 100%;
  }

  .goodslist .checkbox {
    padding: 0;
  }
</style>
{/block}
{block name="pageType"}fenlei{/block}
{block name="main" }

<div class="page-bd" id="app">
  <van-panel>
    <div class="store flex-center">
      <van-image width="1rem" height="1rem" class="store-cover" src="https://img.yzcdn.cn/vant/cat.jpeg"></van-image>
      <div class="store-content flex-item">
        <div>{$store.store_name}</div>
        <div>联系方式: {$store.store_phone}</div>
        <div>联系地址: {$store.store_address}</div>
      </div>
    </div>
    <div slot="footer">
      <div class="flex-center">
        <a href="tel:{$store.store_phone}" class="flex-item flex-center">
          <i class="el-icon-phone pr-1"></i>
          一键拨打
        </a>
        <a class="flex-item flex-center"
          href="http://api.map.baidu.com/marker?location={$store.lat},{$store.lng}&title=商家位置&content={$store.store_name}&output=html">
          <i class="el-icon-location-information pr-1"></i>
          地图导航
        </a>
      </div>
    </div>
  </van-panel>

  {volist name="classList" id="goods"}
  <!-- <a href="{:_url(" goods/info",["id"=>$goods.goods_id])}"> <div><img src="{$goods.goods_thumb}" style="height:200px;"
      alt="">
</div>
<div> 名称： {$goods.goods_name}</div>
<div> 价格： {$goods.shop_price}</div>
</!-->
  {/volist}
  <van-tabs type="card" class="mt-3">
    <van-tab title="店铺介绍">
      <div class="store-tab">
        店铺介绍：{$store.introduction}
      </div>
    </van-tab>
    <van-tab title="店铺商品">
      <div class="store-tab">
        <div class="goodslist">
          <ul>
            {volist name="classList" id="goods" key="k"}
            <li>
              <div class="checkbox">
                <div class="block">
                  <a href='{:_url(" goods/info",["id"=>$goods.goods_id])}'> <img src="{$goods.goods_thumb}" alt=""
                      class="goodsimg">
                  </a>
                  <div class="info">
                    <p class="fs28 color_3">{$goods.goods_name}</p>
                    <div class="sign fs28 color_9"></div>
                    <div class="Money">
                      <div class="left">
                        <div class="color_3 fs24 num">
                          <p class="fw_b fm_p">￥</p><em class="fs36">{$goods.shop_price} </em>元
                        </div>
                      </div>
                      <div class="number">
                        <img src="/static/mobile/default/images/goodsIcon05.png" onclick="editNum(this, -1);"
                          class="minus">
                        <input class="fs30 color_3 shopnum{$k}" type="text" value="1" onchange="onChangeNum(this)">
                        <img src="/static/mobile/default/images/goodsIcon06.png" onclick="editNum(this, +1);"
                          class="add"></div>
                    </div>
                    <div class="flex">
                      <div class="flex-item"></div>
                      <div onclick="addShop(this, '.shopnum{$k}')" data-id="{$goods.goods_id}" data-sku="sku"
                        data-type="type">
                        <van-button type="primary" size="small" class="mt-2" color="#ee0a24">添加购物车</van-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            {/volist}
          </ul>
        </div>
        <!-- {volist name="classList" id="goods"}
        <van-card price="{$goods.shop_price}" title="{$goods.goods_name}" thumb="{$goods.goods_thumb}"
          data-goods="{$goods.goods_thumb}">
          <div slot="num">
            <van-stepper v-model="value"></van-stepper>
          </div>
          <div slot="footer">
            <van-button type="primary" size="small" class="mt-2" color="#ee0a24">添加购物车</van-button>
          </div>
        </van-card>
        {/volist} -->
      </div>
    </van-tab>
  </van-tabs>
  <!--        <div class="left bor_R">-->
  <!--          {notempty name="$allSort.best"}-->
  <!--          	<div class="box fs28 color_3 boxActive">推荐</div>-->
  <!--          {/notempty}-->
  <!--           {volist name="allSort.rows" id="class" }-->
  <!--           		<div class="box fs28 color_3 {if condition="empty($allSort['best']) && $i == 1"}boxActive{/if}">{$class['m_name']?$class['m_name']:$class['name']}</div>-->
  <!--           {/volist}-->
  <!--        </div>-->
  <!--        <div class="right">-->
  <!--         {notempty name="$allSort.best"}-->
  <!--          	<div class="rightBox" style="display:block">-->
  <!--            {volist name="allSort.best" id="best" }-->
  <!--              <div class="block">-->
  <!--                  <div class="title"><i></i><span class="fs28 fw_b color_3">{$best.m_name}</span><i></i></div>-->
  <!--                  <div class="list">-->
  <!--                  	{volist name="best.children" id="cid"}-->
  <!--                      <a href='{:url("goods/index",['cid'=>$cid])}'><img src="{$classList[$cid]['pic']}" alt=""><span class="fs26 color_6">-->
  <!--                      {$classList[$cid]['m_name']?$classList[$cid]['m_name']:$classList[$cid]['name']}-->
  <!--                      </span></a>-->
  <!--                    {/volist}-->
  <!--                  </div>-->
  <!--              </div>-->
  <!--            {/volist}-->
  <!--          </div>-->
  <!--          {/notempty}-->



  <!--        </div>-->
</div>
{include file="layouts@bottom" /}
{/block}
{block name="footer"}
<script src="__STATIC__/built/pages/storeInfo.js"></script>

<!-- <script>
  $(function () {
    $('.top span').on('click', function () {
      $('.inputBox input').val('');
      $('.inputBox input').focus();
    });
    $('.box').on('click', function () {
      var index = $(this).index();
      $(this).addClass('boxActive');
      $(this).siblings().removeClass('boxActive')
      $('.rightBox').eq(index).show();
      $('.rightBox').eq(index).siblings().hide();
    })
  })
</script> -->

<script>
  //购物车统一请求
  //修改购物车订购数量
  function editNum(that, num) {
    let input = $(that).parent().find('input');
    let value = (input.val() - 0) + num
    if (!value) {
      input.val(1)
      return;
    }
    input.val(value)
  }

  function onChangeNum(that) {
    let num = parseInt(that.value)
    console.log(num)
    if (isNaN(num) || num <= 0) {
      that.value = 1
    }
  }

  function addShop(that, input) {
    var arr = new Object;
    let $that = $(that)
    arr.goods_id = $that.data('id');
    arr.specifications = $that.data('sku');
    arr.type = $that.data('type');
    arr.number = $(input).val();
    var res = jq_ajax("{:url('shop/api.flow/addCart')}", arr);
    if (res.code == 1) {
      if (arr.type == 'onbuy') {
        window.location = '{:_url("flow/checkout",array("rec_id"=>"【res.rec_id】"))}';
        return false;
      }
      $(input).val(1);
    }
    if (res.msg) _alert(res.msg);
  }
</script>
{/block}